<template>
    <pageHeader title="菜单设置"></pageHeader>

    <el-link @click="addOneLevelMenu" :underline="false">
        <el-icon>
            <Plus />
        </el-icon>
    </el-link>

    <div class="div">
        <a-tree v-if="MenuStore.getMenuList.length != 0" :default-expand-all="true" :tree-data="MenuStore.getMenuList">
            <template #title="{ menu_id, menu_text, menu_icon, menu_type, menu_href }">
                <a-dropdown :trigger="['contextmenu']">
                    <span>
                        <el-icon>
                            <component :is="menu_icon"></component>
                        </el-icon>
                        {{ menu_text }}
                    </span>
                    <template #overlay>
                        <a-menu @click="({ key }) => onContextMenuClick(menu_text, menu_id, key, menu_href,menu_icon)">
                            <a-menu-item key="update">修改</a-menu-item>
                            <a-menu-item key="delete">删除</a-menu-item>

                            <a-menu-item v-if="menu_type == 1" key="add">增加</a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </template>
        </a-tree>

        <el-dialog destroy-on-close :show-close="false" @close="Thepopupcloses"  v-model="state.isShowAdd" title="增加菜单" width="30%"
            :before-close="handleClose">
            <div class="content">
                <el-input v-model="state.addMenuParams.text" placeholder="输入菜单名称">
                    <template #prepend>
                        <el-link @click="state.isShowMenuSelect = true" :underline="false">
                            <el-icon>
                                <component :is="state.addMenuParams.icon"></component>
                            </el-icon>
                        </el-link>
                    </template>
                </el-input>

                <el-input v-model="state.addMenuParams.path" placeholder="输入菜单地址">
                    <template #prepend>{{ state.defaultPath }}</template>
                </el-input>

            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.isShowAdd = false">取消</el-button>
                    <el-button type="primary" @click="addMenuAction">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="state.isShowMenuSelect" title="选择菜单图标" width="60%">
            <div class="content">
                <el-link @click="selectClick(key)" :underline="false" v-for="key in ElementPlusIconsVue" :key="key">
                    <el-icon :size="30">
                        <component :is="key"></component>
                    </el-icon>
                </el-link>
            </div>
        </el-dialog>

    </div>
</template>
 
<script setup  lang="ts">


import { onMounted, reactive, toRefs, watch, ref } from "vue";
import http, { setItem, getItem, firstToUpper, createdRouterConfig } from "@/utils";
import { Menu } from "@/types/response/Menu";
//import 'ant-design-vue/dist/reset.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { useMenuStore } from "@/state/menu";
import { ElMessage } from "element-plus";
import { Row, showToast } from 'vant';
const MenuStore = useMenuStore()

const state: {
    menu: Menu[],
    isShowAdd: boolean,
    isShowMenuSelect: boolean,
    toastOkStatus: string,
    defaultPath: string,
    addMenuParams: {
        icon: string,
        text: string,
        path: string,
        type: number,
        father_id: number
    }
} = reactive({
    menu: [],
    isShowAdd: false,
    isShowMenuSelect: false,
    toastOkStatus: '',
    defaultPath: '',
    addMenuParams: {
        icon: "QuestionFilled",
        text: "",
        path: "",
        type: 0,
        father_id: 0
    }
})

const Thepopupcloses =()=>{
    state.addMenuParams={
        icon: "QuestionFilled",
        text: "",
        path: "",
        type: 0,
        father_id: 0
    }
}

onMounted(() => {
    
})
//修改
const undata =(row:any)=>{
    //console.log("row" row)
}
const addOneLevelMenu = async () => {
    state.addMenuParams.type = 1
    state.addMenuParams.father_id = 0
    state.isShowAdd = true
}
const addMenuAction = async () => {

    if (state.toastOkStatus == "update") {
        await http.menuupdata(state.addMenuParams)
        showToast("修改成功")
        await MenuStore.httpMenuList();
    } else {
        state.addMenuParams.path = state.addMenuParams.type == 1 ? state.addMenuParams.path : `/${state.addMenuParams.path}`
        await http.menuAdd(state.addMenuParams)
        await MenuStore.httpMenuList();
    }

    state.isShowAdd = false
}
const selectClick = (icon: any) => {
    state.addMenuParams.icon = icon.name
    state.isShowMenuSelect = false
}

const onContextMenuClick =async (name: string | number, id: number, action: string, path: string,icon:string) => {
    console.log(`name: ${name}, id : ${id}, action: ${JSON.stringify(action)}`);
    console.log("name",name,"id",id,"action",action,"path",path)
    switch (action) {
        case "update":
            state.toastOkStatus = "update"
            state.addMenuParams.icon=icon;
            state.addMenuParams.text=<string>name;
            state.addMenuParams.path=path
            state.addMenuParams.type=id;
            state
            state.isShowAdd = true
            break;
        case "delete":
            await http.menudelete({id:id})
            await MenuStore.httpMenuList();
            showToast("删除成功")
            
            break;
        case "add":
            state.toastOkStatus = "add"

            state.addMenuParams.type = 0
            state.addMenuParams.father_id = id
            state.defaultPath = `/${path}/`
            state.isShowAdd = true
            console.log("addMenuParams: ", state.addMenuParams);

            break;

        default:
            break;
    }
};
</script>
 
<style lang="less" scoped></style>
 
 